<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #a1 {
        color: black;
        text-decoration: none;
      }
      /* css伪类:当触发某种状态时触发 */
      /* 
      *hover 鼠标悬停
      *focus 鼠标聚焦 可交互元素且同一时间同一页面只有一个元素可获得焦点
      *visited 访问过的标签触发,标记
      *active 鼠标点击触发,松开消失

      *before 添加前缀,在元素左侧,还可以单独设置样式
      *after 添加后缀
      
      *first-letter 选中元素第一个character
      *first-line 选中元素第一行
      *empty 当标签为空时触发
      */
      #a1:hover {
        color: rebeccapurple;
      }
      #a1:focus {
        color: blue;
      }
      #a1:visited {
        color: yellow;
      }
      #button:active {
        width: 200px;
      }
      .rmb:before {
        content: "￥";
        color: aqua;
      }
      .rmb::after {
        content: "yuan";
        color: blueviolet;
      }
      p {
        text-indent: 2em;
        font-family: "仿宋";
      }
      p:first-letter {
        font-size: 30px;
        color: red;
      }
    </style>
  </head>
  <body>
    <a href="https://www.baidu.com" id="a1" target="_blank">百度以下</a>
    <button id="button">按钮</button>
    <!-- table表格，tr列，td行
     -->
    <table>
      <tr>
        <td>基本工资</td>
        <td class="rmb">5000</td>
      </tr>
      <tr>
        <td>奖金</td>
        <td class="rmb">2000</td>
      </tr>
      <tr>
        <td>合计</td>
        <td class="rmb">7000</td>
      </tr>
    </table>
    <p>
      ArkUI是一套构建分布式应用界面的声明式UI开发框架。它使用极简的UI信息语法、丰富的UI组件、以及实时界面预览工具，帮助您提升HarmonyOS应用界面开发效率30%。您只需使用一套ArkTS
      API，就能在多个HarmonyOS设备上提供生动而流畅的用户界面体验。
    </p>
  </body>
</html>
